<template>
  <div class="orders-page container">
    <section class="orders-page__hero card">
      <div class="orders-page__intro">
        <h2>订单中心</h2>
        <p>
          查看从库存核实到发货签收的全流程信息，支持对账、售后、发票等动作。登录后可同步后端
          <code>trade/Order</code> 数据。
        </p>
      </div>
      <div class="orders-page__cta">
        <button v-if="!isLoggedIn && !partial" class="btn btn--primary" @click="openLogin">
          登录后查看订单
        </button>
        <button v-else class="btn btn--ghost" @click="goMember">
          前往会员中心
        </button>
      </div>
    </section>
    <OrderCenterSection />
  </div>
</template>

<script setup>
import { computed, inject } from "vue";
import { useRouter } from "vue-router";
import OrderCenterSection from "../components/OrderCenterSection.vue";
import { useUserStore } from "../store/user";

const userStore = useUserStore();
const appBridge = inject("appBridge", null);
const router = useRouter();

const isLoggedIn = computed(() => userStore.isLoggedIn);
const partial = computed(() => userStore.partial);

const openLogin = () => {
  appBridge?.openLogin?.();
};

const goMember = () => {
  router.push({ name: "member" });
};
</script>

<style scoped lang="scss">
.orders-page {
  display: flex;
  flex-direction: column;
  gap: 32px;
  padding-bottom: 60px;
}

.orders-page__hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 32px;

  h2 {
    margin: 0 0 12px;
  }

  p {
    margin: 0;
    color: var(--gray-600);
  }

  code {
    background: var(--gray-100);
    border-radius: 6px;
    padding: 2px 6px;
    font-size: 12px;
    color: var(--primary-color);
  }
}

.orders-page__cta {
  display: flex;
  gap: 12px;
}

.btn {
  border: none;
  border-radius: 12px;
  padding: 10px 20px;
  font-weight: 600;
  cursor: pointer;

  &--primary {
    background: var(--primary-color);
    color: #fff;
  }

  &--ghost {
    background: var(--gray-100);
    color: var(--primary-color);
  }
}

@media (max-width: 840px) {
  .orders-page__hero {
    flex-direction: column;
    align-items: flex-start;
  }
}
</style>
